<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>horizontal center test</title>
    <!-- <link href="" type="text/css" rel="stylesheet" /> -->
</head>
<style>
    body .div1{
       width: 80%;
       height: 100px;
       background: #ddd;
       border: 1px solid #111;
    }
    
    #header {
        position: fixed;
        left:0;
        right:0;
        top:0;
        margin: auto;
    }
    
    #body{
        margin: 150px auto 0;
        height: 800px;
        background:#C0CD89;
    }
    
    #footer {
        position: relative;
        margin-top: 50px;
        width: 100%;
        height: 150px;
        border: 1px dashed #ddd;
    }
    
    #footer .div2 {
        position: absolute;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
    }
</style>
<body>
    <div id="header" class="div1">HEADER: fixed</div>
    <div id="body" class="div1">BODY</div>
    <div id="footer">
        FOOTER: relative
        <div class="div1 div2">FOOTER CONTENT: absolute</div>
    </div>
</body>
</html>